<template>
  <a-row class="grid-demo menu" style="margin-bottom: 16px" align="center">
    <a-col flex="auto">
      <a-menu mode="horizontal" :selected-keys="selectedKeys" @menu-item-click="doClick">
        <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
          <div class="div_avatar">
            <img src="@/assets/logo.png" class="title_avatar" />
          </div>
        </a-menu-item>
        <a-menu-item v-for="item in visibleMenu" :key="item.path">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-col>
    <a-col flex="100px">
      <div>{{ store.state.user?.user?.userName ?? "未登录xxx" }}</div>

<!--      <a-button type="primary" @click="login">登录</a-button>-->
    </a-col>
  </a-row>
</template>
<script setup lang="ts">
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";
import { ref,computed} from "vue";
import { useStore } from "vuex";
import { checkAccess } from "@/access/checkAccess";
// import http from '@/utils/httpUtils'
const selectedKeys = ref(["/"]); //设置默认选中主页
const router = useRouter();
//用户信息vuex
const store = useStore();

//控制路由菜单的显隐
const visibleMenu = computed(() => {
  return routes.filter((item, index) => {
    if (item.meta?.hiddenInMenu) {
      return false;
    }
    //根据用户角色显示菜单 如果角色是管理员，则可以看管理员对应的页面 否则不能看
    if (!checkAccess(store.state.user?.user, item.meta?.access as any )) {
      return false;
    }
    return true;
  });
});

//刷新路由之后将默认选中改变
router.afterEach((to, from) => {
  selectedKeys.value = [to.path];
});

//跳转路由的方法
const doClick = (key: String) => {
  router.push({
    path: key,
  });
};

// const login  = async() =>{
//   //先判断 如果user.ts里面登录状态是空 就是第一次登录
//   // if (!store.state.user.user.userRole) {
//   //   //第一次登录
//   // }
//   await store.dispatch("user/getLoginUser", {});
// };
</script>

<style scope>
.menu {
  box-sizing: border-box;
  width: 100%;
  padding: 40px;

  /* background-color: var(--color-neutral-2); */
}
.title_avatar {
  width: 80px;
  width: 100%;
  min-height: 100%;
}
.div_avatar {
  display: inline-block;
  margin: 5px auto;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border: 2px solid #fff;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
}
</style>
